<template>
  <div class="shop">
    <Backbtn></Backbtn>
    <swiper :swiper="swiper" :auto="0"></swiper>
    <!-- 商品服务 -->
    <shopinfo :info="info"></shopinfo>
    <!-- 商品标题 -->
    <section class="goodsInfo">
      <div class="title">{{goodinfo.name}}</div>
      <div class="subtitle">{{goodinfo.goods_brief}}</div>
      <div class="price">￥ {{Number(goodinfo.retail_price).toFixed(2)}}</div>
    </section>
    <!-- 选择规格 -->
    <div class="change">
      <van-cell title="请选择规格数量" @click="onSku">
        <template #right-icon>
          <van-icon name="arrow" style="line-height: inherit;" />
        </template>
      </van-cell>
    </div>
    <!-- 商品介绍 -->
    <goodinfo :info="goodinfo.goods_desc"></goodinfo>
    <!-- 常见问题 -->
    <div class="wenti">
      <Lines :titles="line"></Lines>
      <Wenti :info="wenti"></Wenti>
    </div>
    <!-- 大家都在看 -->
    <div class="look">
      <Lines :titles="{ name: '大家都在看', size: '18px' }"></Lines>
      <Product :goodsList="goodlist" :clickEvent="true"></Product>
    </div>
    <!-- 购物车 -->
    <div class="shopcar">
      <van-goods-action>
        <van-goods-action-icon
          icon="cart-o"
          text="购物车"
          :badge="shopnum"
          :class="shopnum>0?'':'nonum'"
          @click="toCar"
        />
        <van-goods-action-icon icon="star-o" text="收藏" @click="onClickIcon" v-if="stars" />
        <van-goods-action-icon icon="star" text="已收藏" @click="onClickIcon" color="#ff5000" v-else />
        <van-goods-action-button type="danger" text="立即购买" @click="onBuyClicked" />
        <van-goods-action-button type="warning" text="加入购物车" @click="onSku" />
      </van-goods-action>
    </div>
    <!-- SKU -->
    <van-sku
      v-model="show"
      :goods-id="sku.goods_id"
      :sku="sku"
      :goods="goods"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
    />
  </div>
</template>

<script>
import Swiper from "@/components/swiper/swiper";
import shopinfo from "@/components/details/shopinfo";
import goodinfo from "@/components/details/goodinfo";
import Lines from "@/components/Home/Line.vue";
import Product from "@/components/Home/Product.vue";
import Backbtn from "@/components/details/Backbtn.vue";
import Wenti from "@/components/details/Wenti.vue";
import { ShopList, RelatedList, ShopNum, AddCar } from "@/request/api";
import { getCookie } from "@/util/cookie";

export default {
  components: {
    Swiper,
    Backbtn,
    shopinfo,
    goodinfo,
    Lines,
    Wenti,
    Product
  },
  data() {
    return {
      swiper: [],
      info: [" 30天无忧退货 ", " 48小时快速退款 ", " 满88元免邮费 "],
      goodinfo: [],
      show: false,
      line: { name: "常见问题", size: "18px" },
      wenti: [],
      shopnum: 0,
      goodlist: [],
      stars: true,
      sku: {
        tree: [],
        goods_id: 0,
        price: "99999.00", // 默认价格（单位元）
        stock_num: 0, // 商品总库存
        collection_id: 0, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: true, // 是否无规格商品
        hide_stock: true // 是否隐藏剩余库存
      },
      goods: {
        // 数据结构见下方文档
        picture: "https://img.yzcdn.cn/1.jpg"
      }
    };
  },
  created() {
    this.Create();
  },
  watch: {
    $route(to, from) {
      this.Create();
    }
  },
  methods: {

    toCar() {
      this.$router.push("/shopcar");
    },
    Create() {
      ShopList({ id: this.$route.params.id }).then(res => {
        var arr = JSON.parse(
          JSON.stringify(res.data.gallery).replace(/img_url/g, "image_url")
        );
        this.swiper = arr;
        this.goodinfo = res.data.info;
        this.wenti = res.data.issue;
        this.sku.price = res.data.productList[0].retail_price;
        this.sku.stock_num = res.data.productList[0].goods_number;
        this.sku.collection_id = res.data.productList[0].id;
        this.sku.goods_id = res.data.productList[0].goods_id;
        this.goods.picture = res.data.info.list_pic_url;
      });
      RelatedList({ id: this.$route.params.id }).then(res => {
        this.goodlist = res.data.goodsList;
      });
      ShopNum().then(res => {
        this.shopnum = res.data.cartTotal.goodsCount;
      });
    },
    onAddCartClicked(e) {
      AddCar({
        goodsId: e.goodsId,
        productId: e.selectedSkuComb.id,
        number: e.selectedNum
      }).then(res => {
        if (res.errno == 0) {
          this.$toast.success("加入成功");
          ShopNum().then(res => {
            this.shopnum = res.data.cartTotal.goodsCount;
          });
        }
      });
    },
    onBuyClicked() {
      this.$notify({
        message: "该功能暂未开放",
        type: "danger"
      });
    },
    onSku() {
      this.show = !this.show;
    },
    onClickIcon() {
      let token = getCookie("token");
      if (token == null) {
        this.$toast.fail("请登录");
      } else {
        this.stars = !this.stars;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.shop {
  background-color: #f4f4f4;
  .change {
    border-top: 1px solid #ccc;
  }
  .look {
    background-color: #fff;
    margin-top: 20px;
    padding-top: 20px;
    margin-bottom: 50px;
  }
  .wenti {
    background-color: #fff;
    //   margin-bottom: 20px;
    .wen {
      padding-top: 20px;
    }
  }
  .goodsInfo {
    background: #fff;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    line-height: 30px;
    .title {
      font-size: 24px;
      font-weight: normal;
    }
    .subtitle {
      font-size: 14px;
      color: #666;
    }
    .price {
      color: darkred;
    }
  }
  .shopcar {
    .nonum {
      /deep/.van-info {
        display: none;
      }
    }
  }
  /deep/.van-goods-action {
    z-index: 10;
  }
}
</style>